<template>
  <div class="content">
    <div class="active">
      <div class="header">车辆总览</div>
      <div class="bodyobj">
        <div class="body">
          <div class="description">
            <span>当日流出</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/当日流出.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>当日流入</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/当日流入.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>固定车辆</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/固定车辆.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>临时车辆</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/临时车辆.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>违停车辆</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/违停车辆.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>未归车辆</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/未归车辆.png" alt />
        </div>

        <div class="bodybottom">
          <div class="description">
            <span>长时间停留车辆</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/长时间停留车辆.png" alt />
        </div>
        <div class="bodybottom">
          <div class="description">
            <span>固定车辆平均停留时长</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/固定车辆平均停留时间.png" alt />
        </div>
        <div class="bodybottom">
          <div class="description">
            <span>临时车辆平均停留时长</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-车辆分析_slices/临时车辆平均停留时间.png" alt />
        </div>
      </div>
    </div>

    <div class="father1" v-show="iscarshow">
      <div id="line1" />
      <div class="son1">
        <div>车流量统计</div>
      </div>
      <el-button class="checkDoor" type="primary" plain @click="showDoor">查看各门</el-button>
    </div>

    <div class="doorfather" v-show="isDoorFatherShow">
      <div class="doorfather1">
        <div class="father3">
          <div id="line3" :style="{width: '800px', height: '680px'}"/>
          <div class="son3">
            <div>南门流量统计</div>
          </div>
        </div>
      </div>
      <div class="doorfather2">
        <div class="father4">
          <div id="line4" :style="{width: '800px', height: '680px'}"/>
          <div class="son4">
            <div>北门流量统计</div>
          </div>
        </div>
      </div>
    </div>
    <div class="father2">
      <div id="line2" />
      <div class="son2">
        <div>可用车位数量统计</div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "Dashboard",
  components: {},
  data() {
    return {
      isDoorFatherShow: false,
      iscarshow: true
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    var myChart1 = echarts.init(document.getElementById("line1"));
    var myChart2 = echarts.init(document.getElementById("line2"));

    var option1 = {
      backgroundColor: "#fff",
      legend: {
        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
        orient: "horizontal",
        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
        right: 120,
        top: 30,
        data: ["流入车辆", "流出车辆"]
      },
      grid: {
        top: "16%", // 等价于 y: '16%'
        left: "3%",
        right: "8%",
        bottom: "3%",
        containLabel: true
      },
      // 提示框
      tooltip: {
        trigger: "axis"
      },
      xAxis: {
        type: "category",
        axisLine: {
          lineStyle: {
            // 设置x轴颜色
            color: "#000"
          }
        },
        boundaryGap: false,
        data: [
          "0:00",
          "1:00",
          "2:00",
          "3:00",
          "4:00",
          "5:00",
          "6:00",
          "7:00",
          "8:00",
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00"
        ]
      },
      yAxis: {
        type: "value",
        min: 0, // 设置y轴刻度的最小值
        max: 400, // 设置y轴刻度的最大值
        splitNumber: 9, // 设置y轴刻度间隔个数
        axisLine: {
          lineStyle: {
            // 设置y轴颜色
            color: "#000"
          }
        }
      },
      series: [
        {
          name: "流入车辆",
          data: [
            20,
            32,
            10,
            34,
            10,
            10,
            20,
            20,
            32,
            16,
            34,
            210,
            10,
            320,
            20,
            32,
            319,
            34,
            310,
            10,
            220,
            22,
            34,
            35
          ],
          type: "line",
          // 设置小圆点消失
          // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
          symbol: "none",
          // 设置折线弧度，取值：0-1之间
          smooth: 0.5,
          areaStyle: {}
        },

        {
          name: "流出车辆",
          data: [
            20,
            32,
            41,
            94,
            90,
            30,
            20,
            20,
            132,
            41,
            134,
            90,
            130,
            20,
            20,
            32,
            141,
            34,
            90,
            30,
            20,
            23,
            55,
            66
          ],
          type: "line",
          smooth: 0.5,
          symbol: "none",
          areaStyle: {}
        }
      ],
      color: ["#96CDFE", "#97E0AB"]
    };
    var option2 = {
      backgroundColor: "#fff",
      grid: {
        top: "16%",
        left: "3%",
        right: "8%",
        bottom: "3%",
        containLabel: true
      },
      // 提示框
      tooltip: {
        trigger: "axis"
      },
      xAxis: {
        type: "category",
        axisLine: {
          lineStyle: {
            // 设置x轴颜色
            color: "#000"
          }
        },
        // boundaryGap值为false的时候，折线第一个点在y轴上
        boundaryGap: false,
        data: [
          "0:00",
          "1:00",
          "2:00",
          "3:00",
          "4:00",
          "5:00",
          "6:00",
          "7:00",
          "8:00",
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00"
        ]
      },
      yAxis: {
        type: "value",
        min: 0, // 设置y轴刻度的最小值
        max: 400, // 设置y轴刻度的最大值
        splitNumber: 9, // 设置y轴刻度间隔个数
        axisLine: {
          lineStyle: {
            // 设置y轴颜色
            color: "#000"
          }
        }
      },
      series: [
        {
          name: "可用车位数量统计",
          data: [
            20,
            32,
            67,
            34,
            10,
            10,
            20,
            20,
            132,
            89,
            34,
            10,
            10,
            20,
            120,
            232,
            13,
            34,
            10,
            10,
            20,
            22,
            34,
            35
          ],
          type: "line",
          // 设置小圆点消失
          // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
          symbol: "none",
          // 设置折线弧度，取值：0-1之间
          smooth: 0.5,
          areaStyle: {}
        }
      ],
      color: ["#FDEFE6"]
    };

    myChart1.setOption(option1);
    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById("line3"));
    var myChart4 = echarts.init(document.getElementById("line4"));
    var option3 = {
      backgroundColor: "#fff",
      legend: {
        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
        orient: "horizontal",
        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
        right: 120,
        top: 30,
        data: ["流入车辆", "流出车辆"]
      },
      grid: {
        top: "16%", // 等价于 y: '16%'
        left: "3%",
        right: "8%",
        bottom: "3%",
        containLabel: true
      },
      // 提示框
      tooltip: {
        trigger: "axis"
      },
      xAxis: {
        type: "category",
        axisLine: {
          lineStyle: {
            // 设置x轴颜色
            color: "#000"
          }
        },
        boundaryGap: false,
        data: [
          "0:00",
          "1:00",
          "2:00",
          "3:00",
          "4:00",
          "5:00",
          "6:00",
          "7:00",
          "8:00",
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00"
        ]
      },
      yAxis: {
        type: "value",
        min: 0, // 设置y轴刻度的最小值
        max: 400, // 设置y轴刻度的最大值
        splitNumber: 9, // 设置y轴刻度间隔个数
        axisLine: {
          lineStyle: {
            // 设置y轴颜色
            color: "#000"
          }
        }
      },
      series: [
        {
          name: "流入车辆",
          data: [
            20,
            32,
            10,
            34,
            10,
            10,
            20,
            20,
            32,
            16,
            34,
            210,
            10,
            320,
            20,
            32,
            319,
            34,
            310,
            10,
            220,
            22,
            34,
            35
          ],
          type: "line",
          // 设置小圆点消失
          // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
          symbol: "none",
          // 设置折线弧度，取值：0-1之间
          smooth: 0.5,
          areaStyle: {}
        },

        {
          name: "流出车辆",
          data: [
            20,
            32,
            41,
            94,
            90,
            30,
            20,
            20,
            132,
            41,
            134,
            90,
            130,
            20,
            20,
            32,
            141,
            34,
            90,
            30,
            20,
            23,
            55,
            66
          ],
          type: "line",
          smooth: 0.5,
          symbol: "none",
          areaStyle: {}
        }
      ],
      color: ["#96CDFE", "#97E0AB"]
    };
    var option4 = {
      backgroundColor: "#fff",
      legend: {
        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
        orient: "horizontal",
        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
        right: 120,
        top: 30,
        data: ["流入车辆", "流出车辆"]
      },
      grid: {
        top: "16%", // 等价于 y: '16%'
        left: "3%",
        right: "8%",
        bottom: "3%",
        containLabel: true
      },
      // 提示框
      tooltip: {
        trigger: "axis"
      },
      xAxis: {
        type: "category",
        axisLine: {
          lineStyle: {
            // 设置x轴颜色
            color: "#000"
          }
        },
        boundaryGap: false,
        data: [
          "0:00",
          "1:00",
          "2:00",
          "3:00",
          "4:00",
          "5:00",
          "6:00",
          "7:00",
          "8:00",
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00"
        ]
      },
      yAxis: {
        type: "value",
        min: 0, // 设置y轴刻度的最小值
        max: 400, // 设置y轴刻度的最大值
        splitNumber: 9, // 设置y轴刻度间隔个数
        axisLine: {
          lineStyle: {
            // 设置y轴颜色
            color: "#000"
          }
        }
      },
      series: [
        {
          name: "流入车辆",
          data: [
            20,
            32,
            10,
            34,
            10,
            10,
            20,
            20,
            32,
            16,
            34,
            210,
            10,
            320,
            20,
            32,
            319,
            34,
            310,
            10,
            220,
            22,
            34,
            35
          ],
          type: "line",
          // 设置小圆点消失
          // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
          symbol: "none",
          // 设置折线弧度，取值：0-1之间
          smooth: 0.5,
          areaStyle: {}
        },

        {
          name: "流出车辆",
          data: [
            20,
            32,
            41,
            94,
            90,
            30,
            20,
            20,
            132,
            41,
            134,
            90,
            130,
            20,
            20,
            32,
            141,
            34,
            90,
            30,
            20,
            23,
            55,
            66
          ],
          type: "line",
          smooth: 0.5,
          symbol: "none",
          areaStyle: {}
        }
      ],
      color: ["#96CDFE", "#97E0AB"]
    };
    myChart3.setOption(option3);
    myChart4.setOption(option4);
  },
  methods: {
    showDoor() {
      this.isDoorFatherShow = true;
      this.iscarshow = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.active {
  padding: 20px 30px;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 10px;
  .header {
    font-size: 25px;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
  }
  .bodyobj {
    display: flex;
    flex-wrap: wrap;
    // margin-bottom: 26px;
    .body {
      margin-right: 18px;
      margin-bottom: 20px;
      position: relative;
      width: 220px;
      height: 110px;
      .description {
        position: absolute;
        top: 35px;
        left: 20px;
        span {
          font-size: 16px;
          color: #fff;
        }
        i {
          font-style: initial;
          font-size: 28px;
          color: #fff;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .bodybottom {
      margin-right: 20px;
      margin-bottom: 20px;
      position: relative;
      width: 278px;
      height: 110px;
      .description {
        position: absolute;
        top: 35px;
        left: 20px;
        span {
          font-size: 16px;
          color: #fff;
        }
        i {
          font-style: initial;
          font-size: 28px;
          color: #fff;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
#line1 {
  position: absolute;
  top: 60px;
  left: 50px;
  width: 90%;
  height: 680px;
  border-top: 1px solid #f5f5f5;
}
#line2 {
  position: absolute;
  top: 60px;
  left: 50px;
  width: 90%;
  height: 680px;
  border-top: 1px solid #f5f5f5;
}
#line3 {
  position: absolute;
  top: 60px;
  left: 10px;
  width: 100%;
  height: 680px;
  border-top: 1px solid #f5f5f5;
}
#line4 {
  position: absolute;
  top: 60px;
  left: 10px;
  width: 100%;
  height: 680px;
  border-top: 1px solid #f5f5f5;
}
.father1 {
  position: relative;
  width: 100%;
  height: 840px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  .son1 {
    position: absolute;
    top: 20px;
    left: 23px;
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    width: 510px;
    font-size: 16px;
  }
  .checkDoor {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.father2 {
  position: relative;
  width: 100%;
  height: 840px;
  background-color: #fff;
  border-radius: 10px;
  .son2 {
    position: absolute;
    top: 20px;
    left: 23px;
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    width: 510px;
    font-size: 16px;
  }
}
// 南门
.doorfather {
  display: flex;
  width: 100%;
  .doorfather1 {
    flex: 1;
    height: 840px;
    margin-right: 20px;
    margin-bottom: 20px;
    .father3 {
      width: 100%;
      height: 100%;
      position: relative;
      background-color: #fff;
      border-radius: 10px;
      .son3 {
        position: absolute;
        top: 20px;
        left: 23px;
        padding-bottom: 16px;
        display: flex;
        justify-content: space-between;
        width: 500px;
        font-size: 16px;
      }
    }
  }
  // 北门
  .doorfather2 {
    flex: 1;
    height: 840px;
    .father4 {
      width: 100%;
      height: 100%;
      position: relative;
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 20px;
      .son4 {
        position: absolute;
        top: 20px;
        left: 8px;
        padding-bottom: 16px;
        display: flex;
        justify-content: space-between;
        width: 500px;
        font-size: 16px;
      }
    }
  }
}
</style>